import { createFileRoute, useNavigate } from "@tanstack/react-router";
import { LoaderCircle } from "lucide-react";
import Avatar from "@/components/Avatar";
import Container from "@/components/Container";
import List, { ListItem } from "@/components/List";
import useAuthStore from "@/store/auth";

export const Route = createFileRoute("/")({
  head: () => ({
    meta: [{ title: "Home" }, { name: "description", content: "Home" }],
  }),
  component: Index,
});

const routes = [
  {
    title: "录音示例",
    path: "/audio/recorder",
    desc: "一个使用浏览器录音功能的示例。",
  },
  {
    title: "组件示例",
    path: "/components",
    desc: "列举本项目使用的各种组件。",
  },
  { title: "Demo", path: "/demo", desc: "各种示例的演示？" },
  {
    title: "Load Data",
    path: "/demo/load-data",
    desc: (
      <>
        一个进入页面后就加载数据的示例。本示例使用 <code>@tanstack/react-router</code> 提供的数据加载功能。
      </>
    ),
  },
  {
    title: "Joke",
    path: "/demo/joke",
    desc: (
      <>
        一个调用远程 HTTP API 的示例。本示例使用 JokeAPI 提供的远程服务，使用 <code>@tanstack/react-query</code>{" "}
        来承载对接口调用过程的抽象。
      </>
    ),
  },
  {
    title: "Error",
    path: "/demo/error",
    desc: (
      <>
        演示如何处理组件错误。本示例使用 <code>react-error-boundary</code> 来隔离错误，避免整个程序崩溃。
      </>
    ),
  },
  {
    title: "Dom",
    path: "/demo/dom",
    desc: (
      <>
        演示如何获取组件 dom 元素。React 中使用 <code>ref</code> 属性和 <code>useRef</code> 钩子来获取 dom 元素。
      </>
    ),
  },
];

// TODO: 路由平滑过渡 (v)vue (v)react (x)solid
// TODO: preload
// TODO: i18n

function Index() {
  const navigate = useNavigate();
  const auth = useAuthStore((state) => state);

  return (
    <Container>
      <h3 className="my-10">Welcome Home!</h3>
      {auth.status === "loading" && <LoaderCircle className="animate-spin" />}
      {auth.status === "ok" && (
        <div className="inline-flex items-center gap-4">
          <Avatar src={auth.avatar} alt="my avatar" /> {auth.username}
        </div>
      )}
      <List
        dataSource={routes}
        rowKey={(it) => it.path}
        renderItem={(it) => (
          <ListItem onClick={() => navigate({ to: it.path })}>
            <div>{it.title}</div>
            <div className="text-gray-500 text-xs">{it.desc}</div>
          </ListItem>
        )}
      />
    </Container>
  );
}
